<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">

      <el-form-item label="查询方式" prop="noticeType">
        <el-select v-model="queryParams.code" placeholder="请选择" clearable style="width:100px">
          <el-option label="姓名" value="1"></el-option>
          <el-option label="手机号" value="2"></el-option>
          <el-option label="卡号" value="3"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item prop="noticeTitle" v-show="queryParams.code == '1'">
        <el-input v-model="queryParams.condition" placeholder="请输入姓名" clearable />
      </el-form-item>
      <el-form-item prop="noticeTitle" v-show="queryParams.code == '2'">
        <el-input v-model="queryParams.condition" placeholder="请输入手机号" clearable />
      </el-form-item>
      <el-form-item prop="noticeTitle" v-show="queryParams.code == '3'">
        <el-input v-model="queryParams.condition" placeholder="请输入卡号" clearable />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleSearch">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetSearch">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="tableData" border>
      <el-table-column label="姓名" align="center" prop="name" @click="test" />
      <el-table-column label="手机号" align="center" prop="mobile" />
      <el-table-column label="卡号" align="center" prop="cardNumber" />
      <el-table-column label="绑定时间" align="center" prop="createTime" />
      <el-table-column label="余额" align="center" prop="endBalance" />
      <el-table-column label="总消费金额" align="center" prop="consumptionSum" />
      <el-table-column label="总充值金额" align="center" prop="rechargeSum" />
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="handleWallet(scope.row)" plain>钱包管理</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />

    <!-- 钱包管理对话框 -->
    <el-dialog title="钱包管理" :visible.sync="open" width="600px" append-to-body center style="margin-top:50px;">
      <el-tabs type="border-card">
        <el-tab-pane>
          <span slot="label" style="width:142px;display:block;text-align:center;"><i class="el-icon-money"></i>
            充值</span>
          <div class="dialogBox">
            <el-form ref="form" :model="form" label-width="230px">
              <el-form-item label="姓名：">
                {{ boxInfo.name }}
              </el-form-item>
              <el-form-item label="手机号：">
                {{ boxInfo.phone }}
              </el-form-item>
              <el-form-item label="余额：">
                {{ boxInfo.money }}元
              </el-form-item>
              <el-form-item label="充值：">
                <el-input v-model="handleMoney.amount" placeholder="请输入充值金额" clearable style="width:150px" />
              </el-form-item>
            </el-form>
            <el-button class="confirm" type="primary" @click="addMoney">确认充值</el-button>
          </div>
        </el-tab-pane>
        <el-tab-pane>
          <span slot="label" style="width:141px;display:block;text-align:center;"><i class="el-icon-wallet"></i>
            退款</span>
          <div class="dialogBox">
            <el-form ref="form" :model="form" label-width="230px">
              <el-form-item label="姓名：">
                {{ boxInfo.name }}
              </el-form-item>
              <el-form-item label="手机号：">
                {{ boxInfo.phone }}
              </el-form-item>
              <el-form-item label="余额：">
                {{ boxInfo.money }}元
              </el-form-item>
              <el-form-item label="退款：">
                <el-input v-model="handleMoney.amount" placeholder="请输入退款金额" clearable style="width:150px" />
              </el-form-item>
            </el-form>
            <el-button class="confirm" type="primary" @click="refundMoney">确认退款</el-button>
          </div>
        </el-tab-pane>
        <el-tab-pane>
          <span slot="label" style="width:142px;display:block;text-align:center;"><i class="el-icon-bank-card"></i>
            卡务</span>
          <div class="dialogBox">
            <el-form ref="form" :model="form" label-width="230px">
              <el-form-item label="姓名：">
                {{ boxInfo.name }}
              </el-form-item>
              <el-form-item label="手机号：">
                {{ boxInfo.phone }}
              </el-form-item>
              <el-form-item label="储值卡号：">
                {{ boxInfo.card }}
              </el-form-item>
              <el-form-item label="绑定时间：">
                {{ boxInfo.time }}
              </el-form-item>
            </el-form>
            <el-button class="confirm" type="primary" v-show="type == '1'" @click="miss">挂失</el-button>
            <div class="confirmBox">
              <el-button type="primary" v-show="type == '2'" @click="stopMiss">解挂</el-button>
              <el-button type="primary" v-show="type == '2'" @click="addCard">补卡</el-button>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
      <!-- 补卡对话框 -->
      <el-dialog title="补卡" :visible.sync="openAdd" append-to-body width="500px" style="margin-top:100px;">
        <el-form label-width="100px">
          <el-form-item label="卡号">
            <el-input v-model="test" placeholder="输入预绑定储值卡卡号" style="width:300px" clearable></el-input>
          </el-form-item>
        </el-form>
        <div style="margin-left:300px;">
          <el-button @click="openAdd = false">取 消</el-button>
          <el-button type="primary" @click="openAdd = false">确 定</el-button>
        </div>
      </el-dialog>
    </el-dialog>

  </div>
</template>

<script>
import { walletList, addMoney, refundMoney, lossCard, fixCard } from "@/api/userCenter/index.js";

export default {
  data() {
    return {
      test: "",
      type: '1',
      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 公告表格数据
      tableData: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      openAdd: false,
      // 查询参数
      queryParams: {
        code: "1",
        condition: ""
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        noticeTitle: [
          { required: true, message: "公告标题不能为空", trigger: "blur" }
        ],
        noticeType: [
          { required: true, message: "公告类型不能为空", trigger: "change" }
        ]
      },
      //弹窗信息
      boxInfo: {
        name: "",
        phone: "",
        money: "",
        card: "",
        time: ""
      },
      handleMoney: {
        amount: "",
        userId: ""
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    //挂失卡号
    miss() {
      this.$confirm('此操作将挂失该卡片,是否继续?', '挂失', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        lossCard({
          userId: this.handleMoney.userId
        }).then(res => {
          if (res.data.success == true) {
            this.$message.success(res.data.message)
            this.type = '2'
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    //解除挂失卡号
    stopMiss() {
      this.$confirm('此操作将解除挂失该卡片,是否继续?', '解除挂失', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        fixCard({
          userId: this.handleMoney.userId
        }).then(res => {
          if (res.data.success == true) {
            this.$message.success(res.data.message)
            this.type = '1'
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    //补卡
    addCard() {
      this.openAdd = true
    },
    //钱包管理对话框
    handleWallet(row) {
      this.open = true
      console.log(row);
      this.boxInfo.name = row.name
      this.boxInfo.phone = row.mobile
      this.boxInfo.money = row.endBalance
      this.boxInfo.card = row.cardNumber
      this.boxInfo.time = row.createTime
      this.handleMoney.userId = row.userId
    },
    //充值
    addMoney() {
      addMoney(this.handleMoney).then(res => {
        this.handleMoney.amount = ""
        if (res.data.success == true) {
          this.open = false
          this.$message.success(res.data.message)
          this.resetSearch()
        } else {
          this.$message.info(res.data.message)
        }
      })
    },
    //退款
    refundMoney() {
      refundMoney(this.handleMoney).then(res => {
        this.handleMoney.amount = ""
        if (res.data.success == true) {
          this.open = false
          this.$message.success(res.data.message)
          this.resetSearch()
        } else {
          this.$message.info(res.data.message)
        }
      })
    },
    /** 查询列表 */
    getList() {
      // this.loading = true;
      walletList(this.queryParams).then(res => {
        console.log(res);
        if (res.data.success == true) {
          this.tableData = res.data.data.list;
          this.total = res.data.data.total;
          // this.loading = false;
        } else {
          this.$message.info(res.data.message)
        }
      }).catch(error => {
        // console.log(error.response);
        console.log(error.response.status);
        if (error.response.status != 200) {
          this.$message(error.response.data.message)
        }
        if (error.response.status == 401) {
          this.$confirm('登录状态过期, 请重新登录!', '提示', {
            confirmButtonText: '确定',
            // cancelButtonText: '取消',
            showCancelButton: false,
            type: 'warning'
          }).then(() => {
            this.$router.push('/login')
          }).catch(() => {

          })
        }
      })
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        noticeId: undefined,
        noticeTitle: undefined,
        noticeType: undefined,
        noticeContent: undefined,
        status: "0"
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleSearch() {
      this.getList();
    },
    /** 重置按钮操作 */
    resetSearch() {
      this.queryParams = {
        code: "1",
        condition: ""
      }
      this.getList();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.noticeId)
      this.single = selection.length != 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加公告";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const noticeId = row.noticeId || this.ids
      getNotice(noticeId).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改公告";
      });
    },
    /** 提交按钮 */
    submitForm: function () {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.noticeId != undefined) {
            updateNotice(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addNotice(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const noticeIds = row.noticeId || this.ids
      this.$modal.confirm('是否确认删除公告编号为"' + noticeIds + '"的数据项？').then(function () {
        return delNotice(noticeIds);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => { });
    }
  }
};
</script>
<style>
.dialogBox {
  width: 520px;
  position: relative;
}

.confirm {
  width: 100px;
  position: relative;
  left: calc(50% - 40px);
  margin-top: 20px;
}

.confirmBox {
  width: 160px;
  position: relative;
  left: calc(50% - 80px);
  display: flex;
  justify-content: space-around;
}
</style>
